<template>
  <div class="upload-essay">
    <el-form :model="dataParams" :rules="rules" ref="dataParams" label-width="120px" class="demo-dataParams">
      <el-form-item label="标题" prop="title">
        <el-input v-model="dataParams.title" placeholder="请输入作品名"></el-input>
      </el-form-item>
      <el-form-item label="文章类型" prop="type">
        <el-select v-model="dataParams.type" class="search-select" placeholder="文章类型" size="small">
          <el-option
            v-for="item in articleTypes"
            :key="item.data_id"
            :label="item.series_name"
            :value="item.data_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="menuActive == 0" label="文章内容" prop="content">
        <client-only>
          <wangEditor @getIntroduct="getContent" :introduction="dataParams.content" ref="editor"></wangEditor>
        </client-only>
      </el-form-item>
      <el-form-item label="上传封面">
        <div class="game-foto">
          <uploadImg
            @setCardPic="setCardPic($event, 'picture_list')"
            ref="coverPath"
            type="image"
            api="uploadImage"
            :params="coverParams"
            multiple
          >
          </uploadImg>
        </div>
      </el-form-item>
      <el-form-item label="是否公开" prop="open">
        <el-select v-model="dataParams.open" class="search-select" placeholder="是否公开" size="small">
          <el-option v-for="item in isOpens" :key="item.data_id" :label="item.name" :value="item.data_id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <div class="release all-center" @click="saveArticle">
        发布
      </div>
    </div>
  </div>
</template>

<script>
import wangEditor from '@/components/wangEditor.vue';
export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    wangEditor
  },
  props: ['data_id', 'menuActive'],
  data() {
    return {
      // dataParams: {},
      content: '',
      dataParams: {
        title: '',
        type: 1,
        open: 1,
        content: '',
        show_url_list: [],
        is_audit: 0
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        type: [{ required: true, message: '请选择文章类型', trigger: 'change' }],
      },
      articleTypes: [
        { series_name: '普通文章', data_id: 1 },
        { series_name: '专题文章', data_id: 2 },
      ],
      isOpens: [
        { name: '公开', data_id: 1 },
        { name: '不公开', data_id: 0 },
      ],
      queryParams: {
        key: '',
        type: '',
        open: '',
        min_create_time: '',
        max_create_time: '',
      },
      coverParams: {
      // 接口除form外的其他参数
        op: 'upload_file'
      }
    };
  },
  computed: {},
  watch: {
    data_id(val) {
      if(val) {
        console.log(val)
        this.getEssayDesc(val);
      } else {
        this.resetForm()
      }
    }
  },
  created() {},
  mounted() {

  },
  methods: {
    getContent(html, text) {
      this.dataParams.content = html
      // this.activityForm.text = text
    },
    setCardPic(path, pic) {
      this.dataParams.show_url_list.unshift(path)
      // console.log(path, pic);
    },
    resetForm() {
      this.dataParams.title = ''
      this.dataParams.show_url_list = []
      // this.$refs.editor.html = ''
      this.$refs.coverPath.setEditImg()
      this.dataParams.type = 1
      // this.dataParams.title = ''
      // this.dataParams.title = ''
    },
    getEssayDesc(data_id) {
      if (data_id) {
        this.$api.getEssayDesc({data_id}).then(res => {
          // this.dataParams = { ...res.result }
          console.log(res.result)
          this.dataParams.title = res.result.title
          this.dataParams.type = res.result.type
          this.dataParams.open = res.result.open
          this.$refs.coverPath.setEditImg(res.result.show_url_list.shift())
          this.dataParams.show_url_list = res.result.show_url_list
          this.dataParams.content = res.result.content
          // this.$emit('clearId', true)
          // this.content = res.result.content
        })
      }
    },
    saveArticle() {
      this.$refs.editor.getImages().forEach((m) => {
        this.dataParams.show_url_list.push(m.src)
      });
      // this.dataParams.content = this.$refs.editor.getContent();

      if (this.data_id) {
        let data_id = this.data_id;

        this.$api.updEssayDesc({ ...this.dataParams }, {data_id}).then((res) => {
          this.$message.success('编辑成功')
          this.resetForm()
          this.$emit('clearId', false)
        });
      } else {
        let author = this.$store.state.user?.info?.user_info?.name
        this.$api.createEssayDesc({ author, ...this.dataParams }, {}).then((res) => {
          this.$message.success('创建成功')
          this.resetForm()
          this.$emit('clearId', false)
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.upload-essay {
  background-color: #fff;
  padding: 30px 100px;

  .submit-box {
    text-align: center;
    .release {
      width: 220px;
      height: 48px;
      font-size: 16px;
      color: #333;
      background: #e0cbb4;
      cursor: pointer;
    }

    // .preview-btn {
    //   background-color: transparent;
    //   border: 1px solid #ccc;
    //   margin-left: 35px;
    // }

    // .draft {
    //   font-size: 16px;
    //   font-weight: 400;
    //   color: #C5A37D;
    //   float: right;
    //   cursor: pointer;
    // }
  }

  ::v-deep(.el-select) {
      width: 100%;
    }

    ::v-deep(.el-input__inner) {
      background-color: #f3f4f4;
      border-radius: 0;
      height: 50px;
    }

    ::v-deep(input::-webkit-input-placeholder) {
      color: #999;
    }

    ::v-deep(.el-form-item__content) {
      line-height: normal;
    }
}
</style>
